<style>
.layui-input-block {
	margin-left: 120px;
}
</style>
<form class="layui-form" action="" id="orderEditForm">
	<input type="hidden" name="companyId" th:value="${companyId}" />
	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;">请购单号</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" name="billNo" class="layui-input"
					lay-verify="required" />
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;">请购人</label>
			<div class="layui-input-block" style="width: 200px;">
				<select id="staffId" name="staffId" lay-filter="staffId">
					<option value="">请选择</option>
					<option th:each="t:${staffIds}" th:value="${t.id}"
						th:text="${t.name}"></option>
				</select>
			</div>
		</div>
	</div>
	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;">供应商名称</label>
			<div class="layui-input-block" style="width: 200px;">
				<select style="width: 200px; height: 58px;" name="supplyId"
					lay-verify="required" required lay-ignore>
				</select>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">供应商联系人</label>
			<div class="layui-input-block" style="width: 200px;">
				<select name="supplyContactId" lay-verify="required" required
					lay-filter="supplyContactId">
					<option th:each="s:${contacts}" th:attr="value=${s.id}"
						th:text="${s.name}"></option>
				</select>
			</div>
		</div>
	</div>
	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;">结算方式</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" class="layui-input" required name="statementName"
					readonly="true" lay-verify="required"
					style="background-color: #ececec" /> <input type="hidden"
					name="statementId" value="" /> <input type="hidden"
					name="statementCurrencyId" value="" />
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">结算天数</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" readonly="true" name="statementDays"
					class="layui-input" lay-verify="required"
					style="background-color: #ececec" />
			</div>
		</div>
	</div>
	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;">税率</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" readonly="true" name="statementTaxRate"
					class="layui-input" lay-verify="required"
					style="background-color: #ececec" />
			</div>
		</div>

		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">汇率</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" readonly="true" name="statementExchangeRate"
					class="layui-input" lay-verify="required"
					style="background-color: #ececec" />
			</div>
		</div>
	</div>
	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">联系电话</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" readonly="true" name="supplyContactPhone"
					id="supplyContactPhone" class="layui-input" lay-verify="required"
					style="background-color: #ececec" />
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">到货地址</label>
			<div class="layui-input-block" style="width: 200px;">
				<input type="text" name="addr" class="layui-input"
					lay-verify="required" />
			</div>
		</div>
	</div>

	<div class="layui-row" style="margin-top: 10px;">
		<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
			<label class="layui-form-label" style="width: 120px;"
				lay-filter="supplierContacts">备注</label>
			<div class="layui-input-block" style="width: 520px;">
				<textarea rows="6" cols="74" name="remark" resize="no"
					class="layui-textarea"></textarea>
			</div>
		</div>
	</div>

	<div class="layui-row" style="margin-top: 20px;">
		<div class="layui-col-xs12 layui-col-sm12 layui-col-md12"
			style="text-align: center;">
			<button class="layui-btn" lay-submit="" lay-filter="formSubmit"
				authcode='900262'>提交</button>
			<button type="button" class="layui-btn layui-btn-primary"
				id="closeBtn">关闭</button>
		</div>
	</div>
</form>
<script>
layui.use('form', function(){
	 $("[name='supplyId']").select2({
		  placeholder:"请选择供应商",//placeholder
		  language: 'zh-CN',//中文语言
		  //allowClear:true,//出现删除按钮图片，可以清除下拉选中内容
		  ajax: {
			  	url: "/com/supplier/customer/supplierList",
			    dataType: 'json',
			    delay: 350,
			    data: function (params) {
			      console.log(params.page)
			      return {
			        name: params.term, // search term
			        companyid:1,
			        page: params.page,
			        limit:30
			      };
			    },
			    processResults: function (data, params) {
			      params.page = params.page || 1;
			      return {
			        results: data.data,
			        pagination: {
			          more: (params.page * 30) < data.count
			        }
			      };
			    },
			    cache: true
			  },
			  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
			  minimumInputLength: 0,//最小输入字符，输入最小字符后开始后台请求
			  templateResult: formatRepo, // 处理远程返回数据
			  templateSelection: formatRepoSelection // 设置下拉选中后显示内容
			});
	  
	  	function formatRepo (repo) {
	  		//下拉展示内容可以修改自定义样式
	      if (repo.loading) return repo.text;
	      var markup = "<div class=\"layui-row\" style='width:250px;'>" +
			      "<div class=\"layui-col-xs4 layui-col-sm4 layui-col-md3\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.no+"</div>" +
			     "</div>"+
			     "<div class=\"layui-col-xs8 layui-col-sm8 layui-col-md9\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.name+"</div>" +
			     "</div>";

	      return markup;
	    }

	    function formatRepoSelection (repo) {
    		if(repo.name!=null&&repo.name!=""){
		      	return repo.name;//选中返回select中的值
		      }else{
		    	return repo.text;
	     	}
	    }
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	  form.render();
	  //select2选中事件
	  $("[name='supplyId']").on("select2:select",function(e){
		  //先清空 三级联动 最后一级
		  $("input[name='supplyContactPhone']").val("");
		  var id = e.params.data.id;
		  $.getJSON("/com/supplier/customer/contacts/"+id,function(data){
			  var html = [];
			  html.push("<option value=''>请选择联系人</option>")
			  $.each(data,function(i,item){
				  html.push("<option value='"+item.id+"' data-phone='"+item.phone+"'>"+item.name+"</option>")
			  })
			  $("select[name='supplyContactId']").html(html.join(""));
            form.render('select'); //这个很重要
		  });
		  
		  //选择供应商带出供应商结算方式
		  $.getJSON("/pu/purchaseapply/querySettleMethod/"+id,function(data){
			  /*设置结算方式名称*/
			  $("input[name='statementName']").val(data.statementType);
			  /*设置结算方式Id*/
			  $("input[name='statementId']").val(data.id);
			  /*设置结算天数*/
			  $("input[name='statementDays']").val(data.dates);
			  /*设置结算币种*/
			  $("input[name='statementCurrencyId']").val(data.currency);
			  /*设置结算币种ID*/
			  $("input[name='statementExchangeRate']").val(data.exchangeRate);
              form.render('select'); //这个很重要
		  });
		  //获取税率信息
		  $.getJSON("/pu/purchaseapply/queryTax/"+id+"/"+$("input[name='companyId']").val(),function(data){
              $("input[name='statementTaxRate']").val(data.value);
		  });
		  
	  })
	
	  form.on('select(supplyContactId)', function(data){
		  var phone = $(data.elem).find("option[value='"+data.value+"']").attr("data-phone");
		  $("input[name='supplyContactPhone']").val(phone);
		});      
	  //监听提交
	  form.on('submit(formSubmit)', function(data){
		  var supplyId = $("[name='supplyId']").select2("data")[0];
		    if(supplyId==null||supplyId==""){
		    	layer.msg('供应商必填', {icon: 5});
		    	return false;
		    }
	    $.ajax({
           type: "GET",
           url: "/pu/purchaseapply/add",
           data: $("#orderEditForm").serializeJson(),
           dataType: "json",
           success: function(data){
           	if(data.code==200){
           	toastr.success(data.msg);
           	ins.reload({url:'/pu/purchaseapply/data'})
           	//关闭弹出层
          	    layer.closeAll(editdialogindex);
          	    //更新表格数据
           	}else{
           		layer.msg(data.message);
           		//关闭
           	    layer.closeAll();
           	}
           }
          });
	  });
	  //关闭按钮
	  $("#closeBtn").click(function(){
		  layer.closeAll();
	  })
	});   
</script>

